<template>
    <div style="padding:1%;margin-left: 15%;height: 100%;background-color: #f5f7f9;!important;">
        <Card :bordered="false" dis-hover>
            <p slot="title"
               style="font-size: larger;font-weight: bolder;display: flex;justify-content: space-between;height: 36px">
                <span>友链管理 / 友链列表</span>
                <span>
                    <Button type="info" ghost icon="md-add" @click="addLinkVisable=true">申请友链</Button>
                <RadioGroup style="margin-left: 16px" v-model="linkVo.status" type="button" @on-change="getLink">
                    <Radio :label="3">全部</Radio>
                    <Radio :label="0">待审核</Radio>
                    <Radio :label="1">未通过</Radio>
                    <Radio :label="2">已通过</Radio>
                </RadioGroup>
                </span>
            </p>
            <!--友链列表-->
            <div>
                <Table :height="472" stripe :columns="linkColumns" :data="linkList" highlight-row context-menu
                       show-context-menu @on-contextmenu="handleRow">
                    <template slot-scope="{ row }" slot="url">
                        <span style="color: deepskyblue">{{row.furl}}</span>
                    </template>
                    <template slot-scope="{ row }" slot="status">
                        <Tag v-if="row.fstatus===2" color="success">已通过</Tag>
                        <Tag v-else-if="row.fstatus===1" color="error">未通过</Tag>
                        <Tag v-else color="default">待审核</Tag>
                    </template>
                    <template slot-scope="{ row }" slot="action">
                        <Button ghost type="info" size="small" icon="md-create" style="margin-right: 5px"
                                @click="editLink(row)">编辑
                        </Button>
                        <Button ghost type="error" size="small" icon="md-trash" @click="deleteLink(row.fid)">删除</Button>
                    </template>
                    <template slot="contextMenu">
                        <DropdownItem @click.native="checkLinkVisable = true">审核</DropdownItem>
                    </template>
                </Table>
            </div>
            <!--分页-->
            <div>
                <Page style="height: 30px;margin-top: 1%" :total="total" :page-size="linkVo.pageSize"
                      show-elevator show-sizer
                      show-total @on-change="changePageNum" :page-size-opts="pageSizeChoice"
                      @on-page-size-change="changePageSize"/>
            </div>
        </Card>
        <!--申请友链对话框-->
        <Modal v-model="addLinkVisable" title="申请友链" footer-hide>
            <Form ref="linkRef" :model="linkVo" :rules="linkRules" :label-width="120">
                <FormItem label="网站名称:" prop="name">
                    <Input v-model="linkVo.name" placeholder="请输入友链网站名称"/>
                </FormItem>
                <FormItem label="网站地址:" prop="url">
                    <Input v-model="linkVo.url" placeholder="请输入友链网站地址" @keyup.native.enter="addLink('linkRef')"/>
                </FormItem>
                <Button type="success" long @click="addLink('linkRef')">提交</Button>
                <Button style="margin-top: 10px" long @click="addLinkVisable=false">取消</Button>
            </Form>
        </Modal>
        <!--审核友链对话框-->
        <Modal v-model="checkLinkVisable" title="审核友链" footer-hide>
            <Form ref="linkRef" :model="linkVo" :rules="linkRules" :label-width="120">
                <FormItem label="审核网站名称:">
                    <span style="font-size: larger;font-weight: bolder">{{linkVo.name}}</span>
                </FormItem>
                <FormItem label="审核网站地址:">
                    <span style="font-size: larger;font-weight: bolder">{{linkVo.url}}</span>
                </FormItem>
                <FormItem label="友链审核结果:">
                    <RadioGroup style="margin-left: 16px" v-model="linkVo.status" type="button">
                        <Radio :label="1">不通过</Radio>
                        <Radio :label="2">通过</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="原因:">
                    <Input v-model="linkVo.reason" placeholder="通过不用填，不通过必须写"/>
                </FormItem>
                <Button type="success" long @click="checkLink('linkRef')">提交审核</Button>
                <Button style="margin-top: 10px" long @click="cancelCheck">取消</Button>
            </Form>
        </Modal>
        <!--更新友链内容-->
        <Modal v-model="editLinkVisable" title="更新友链" footer-hide :closable="false">
            <Form ref="linkRef" :model="linkVo" :rules="linkRules" :label-width="120">
                <FormItem label="网站名称:" prop="name">
                    <Input v-model="linkVo.name" placeholder="请输入新友链网站名称"/>
                </FormItem>
                <FormItem label="网站地址:" prop="url">
                    <Input v-model="linkVo.url" placeholder="请输入新友链网站地址" @keyup.native.enter="updateLink('linkRef')"/>
                </FormItem>
                <Button type="success" long @click="updateLink('linkRef')">提交</Button>
                <Button style="margin-top: 10px" long @click="cancelUpdate">取消</Button>
            </Form>
        </Modal>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        linkVo: {
          pageNum: 1,
          pageSize: 9,
          status: 3,
          id: 0,
          my: false,
          name: '',
          url: '',
          friendId: 0,
          reason: ''
        },
        total: 0,
        addLinkVisable: false,
        checkLinkVisable: false,
        editLinkVisable: false,
        linkList: [],
        linkColumns: [
          {
            type: 'index',
            align: 'center'
          },
          {
            title: '友链网站名称',
            key: 'fname',
            align: 'center',
            width: '120px'
          },
          {
            title: '友链地址',
            slot: 'url',
            align: 'center',
            width: '200px'
          },
          {
            title: '申请时间',
            key: 'fFriendblogtime',
            align: 'center',
            width: '170px'
          },
          {
            title: '状态',
            slot: 'status',
            align: 'center',
            width: '120px'
          },
          {
            title: '反馈信息',
            key: 'fbackinfo',
            align: 'center',
            width: '360px'
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center',
            width: '180px'
          }
        ],
        linkRules: {
          name: [
            { required: true, message: '网站名称不能为空', trigger: 'blur' }
          ],
          url: [
            { required: true, message: '网站地址不能为空', trigger: 'blur' }
          ]
        },
        pageSizeChoice: [9, 18, 30, 50, 100]
      }
    },
    mounted() {
      this.getLink()
    },
    methods: {
      getLink() {
        this.$http.get('friend-blog', { params: new URLSearchParams(this.linkVo) }).then(res => {
          res = res.data;
          if (res.code === 0) {
            this.linkList = res.data;
            this.total = res.count;
          } else {
            this.$Message.error(res.msg)
          }
        })
      },
      // 申请友链
      addLink(name) {
        this.$refs[name].validate(valid => {
          if (!valid) {
            return
          }
          this.$http.post('friend-blog', new URLSearchParams(this.linkVo)).then(res => {
            res = res.data;
            if (res.code === 6501) {
              this.getLink();
              this.$refs[name].resetFields();
              this.addLinkVisable = false;
              this.$Message.success(res.msg);
            } else {
              this.$Message.error(res.msg);
            }
          })
        })
      },
      // 当前页码改变
      changePageNum(pagenum) {
        this.linkVo.pageNum = pagenum;
        this.getLink();
      },
      // 当前页个数改变
      changePageSize(pagesize) {
        this.linkVo.pageSize = pagesize;
        this.getLink();
      },
      // 删除友链
      deleteLink(id) {
        this.$Modal.confirm({
          title: '删除',
          content: '您确定要删除该友链申请吗？',
          onOk: () => {
            this.$http.delete(`friend-blog?id=${id}`).then(res => {
              res = res.data;
              if (res.code === 6530) {
                this.getLink();
                this.$Message.success(res.msg);
              } else {
                this.$Message.error(res.msg);
              }
            })
          }
        })
      },
      handleRow(row) {
        this.linkVo.friendId = row.fid;
        this.linkVo.name = row.fname;
        this.linkVo.url = row.furl;
      },
      // 审核友链
      checkLink(name) {
        this.$refs[name].validate(valid => {
          if (!valid) {
            return
          }
          this.$http.patch('friend-blog', new URLSearchParams(this.linkVo)).then(res => {
            res = res.data;
            if (res.code === 6510) {
              this.linkVo.status = 3;
              this.linkVo.friendId = 0;
              this.linkVo.reason = '';
              this.linkVo.name = '';
              this.linkVo.url = '';
              this.checkLinkVisable = false;
              this.getLink();
              this.$Message.success(res.msg);
            } else {
              this.$Message.error(res.msg);
            }
          })
        })
      },
      // 取消审核
      cancelCheck() {
        this.linkVo.friendId = 0;
        this.linkVo.name = '';
        this.linkVo.url = '';
        this.checkLinkVisable = false;
      },
      // 显示更新友链对话框
      editLink(row) {
        this.linkVo.friendId = row.fid;
        this.linkVo.name = row.fname;
        this.linkVo.url = row.furl;
        this.editLinkVisable = true;
      },
      // 更新友链
      updateLink(name) {
        this.$refs[name].validate(valid => {
          if (!valid) {
            return
          }
          this.$http.put('friend-blog', new URLSearchParams(this.linkVo)).then(res => {
            res = res.data;
            if (res.code === 6520) {
              this.$refs[name].resetFields();
              this.linkVo.friendId = 0;
              this.editLinkVisable = false;
              this.getLink();
              this.$Message.success(res.msg);
            } else {
              this.$Message.error(res.msg);
            }
          })
        })
      },
      // 取消更新
      cancelUpdate() {
        this.linkVo.friendId = 0;
        this.linkVo.name = '';
        this.linkVo.url = '';
        this.editLinkVisable = false;
      }
    }
  }
</script>

<style scoped>

</style>
